<template>
  <view class="wrap">
    <view class="u-tabs-box">
      <u-tabs-swiper
        activeColor="#f29100"
        ref="tabs"
        :list="infoModals"
        :current="current"
        @change="change"
        :is-scroll="false"
        swiperWidth="750"
      ></u-tabs-swiper>
    </view>
    <swiper
      class="swiper-box"
      :current="swiperCurrent"
      @change="relativeChange"
    >
      <swiper-item class="swiper-item">
        <scroll-view scroll-y style="height: 100%; width: 100%">
          <view>
            <view class="title">基本信息</view>
            <view class="info">
              <u-cell-group>
                <template v-for="(field, index) in baseInfo">
                  <template v-if="field.formType == 'customer'">
                    <u-cell-item
                      :key="'customer-' + index"
                      :arrow="false"
                      :title="field.name"
                      :value="field.value.customerName"
                    ></u-cell-item>
                  </template>
                  <template v-else-if="field.formType == 'map_address'">
                    <u-cell-item
                      :key="'map_address-' + index"
                      :arrow="false"
                      title="区域"
                      :value="field.value.address"
                    ></u-cell-item>
                    <u-cell-item
                      :key="'map_address1-' + index"
                      :arrow="false"
                      :title="field.name"
                      :value="field.value.detailAddress"
                    ></u-cell-item>
                    <u-cell-item
                      :key="'map_address2-' + index"
                      :arrow="false"
                      title="详细地址"
                      :value="field.value.detailAddress"
                    ></u-cell-item>
                  </template>
                  <template v-else-if="field.formType == 'mobile'">
                    <u-cell-item
                      :key="'mobile-' + index"
                      :arrow="false"
                      :title="field.name"
                      :value="field.value"
                      @click="openCall(field.value)"
                    ></u-cell-item>
                  </template>
                  <template v-else>
                    <u-cell-item
                      :key="'def-' + index"
                      :arrow="false"
                      :title="field.name"
                      :value="field.value || '--'"
                    ></u-cell-item>
                  </template>
                </template>
              </u-cell-group>
            </view>
          </view>
          <view>
            <view
              class="title"
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
              v-if="examineInfo.steps ? examineInfo.steps.length : false"
            >
              <text>审批信息</text>
              <text
                style="color: #2979ff"
                v-if="
                  examineInfo.isRecheck ? examineInfo.isRecheck == 1 : false
                "
                @click="reCheckData"
                >撤回审核</text
              >
            </view>
            <view>
              <examine-info :value="examineInfo.steps || []"></examine-info>
            </view>
          </view>
          <l-file ref="lFile"></l-file>
        </scroll-view>
      </swiper-item>
      <swiper-item class="swiper-item">
        <scroll-view
          v-if="listData.length"
          scroll-y
          style="height: 100%; width: 100%"
          :scroll-top="scrollTop"
          @scroll="changeScroll"
          @scrolltolower="reachBottom"
        >
          <view class="page-box">
            <follow-record-list :listData="listData"></follow-record-list>
          </view>
          <u-loadmore :status="downStatus" bg-color="#efefef"></u-loadmore>
        </scroll-view>
        <u-empty v-else mode="list"></u-empty>
      </swiper-item>
      <swiper-item class="swiper-item">
        <scroll-view
          v-if="listData.length"
          scroll-y
          style="height: 100%; width: 100%"
        >
          <view class="page-box">
            <contacts-list
              :listData="listData"
              :crmType="relativeType"
            ></contacts-list>
          </view>
          <u-loadmore :status="downStatus" bg-color="#efefef"></u-loadmore>
        </scroll-view>
        <u-empty v-else mode="list"></u-empty>
      </swiper-item>
    </swiper>

    <u-modal
      v-model="recheckModel"
      title="请填写撤回理由"
      :show-cancel-button="true"
      @cancel="closeModel"
      @confirm="confirmModel"
    >
      <view style="padding: 10rpx 20rpx">
        <u-input
          :border="false"
          type="textarea"
          placeholder="请填写撤回理由"
          v-model="recheckReason"
          clearable
        ></u-input>
      </view>
    </u-modal>
  </view>
</template>

<script>
import {
  filedGetInformation,
  crmExamineFlowStepList,
  crmExamineFlowAuditExamine,
} from "@/api/customer/common.js";
import {
  crmCustomerRecordIndex,
  crmCustomerQueryContacts,
  crmCustomerRead,
} from "@/api/customer/customer.js";
import { crmContactsRead } from "@/api/customer/contacts.js";
import { crmBusinessRead } from "@/api/customer/business.js";
import crmTypeModel from "@/pages/customerManagement/model/crmTypeModel.js";
import lFile from "@/components/l-file/l-file.vue";

import followRecordList from "@/pages/customerManagement/followRecord/components/followRecordList.vue";
import contactsList from "@/pages/customerManagement/contacts/components/contactsList.vue";
import ExamineInfo from "@/pages/customerManagement/common/components/ExamineInfo.vue";
export default {
  data() {
    return {
      baseInfo: null,
      params: null,
      current: 0,
      swiperCurrent: 0,
      downStatus: "nomore",
      scrollTop: 0,
      listData: [],
      pageSize: 15,
      currentPage: 1,
      relativeType: "baseInfo",
      crmType: "",
      examineInfo: {},
      crmData: {},
      recheckModel: false,
      recheckReason: "",
    };
  },
  components: {
    followRecordList,
    contactsList,
    ExamineInfo,
    lFile,
  },
  onLoad(option) {
    this.params = JSON.parse(decodeURIComponent(option.params));
    this.crmData = this.params.data;
    this.crmType = this.params.crmType;
    uni.setNavigationBarTitle({
      title: this.handleBarTitle(this.params.crmType),
    });
  },
  onShow() {
    this.getFiledGetInformation();
    this.getCrmBaseInfo();
  },
  computed: {
    infoModals() {
      let arr = [];
      if (this.crmType == "customer") {
        arr = [
          {
            name: "基本信息",
            type: "baseInfo",
          },
          {
            name: "跟进记录",
            type: "followRecord",
          },
          {
            name: "联系人",
            type: "contacts",
          },
        ];
      }
      return arr;
    },

    showExamine() {
      if (
        this.crmType === "contract" ||
        this.crmType === "receivables" ||
        this.crmType === "leads" ||
        this.crmType === "customer" ||
        this.crmType === "business" ||
        this.crmType === "preSales"
      ) {
        return true;
      }
      return false;
    },
  },
  methods: {
    getFiledGetInformation() {
      let param = {
        types: crmTypeModel[this.crmType],
        id: this.params.crmId,
      };
      filedGetInformation(param).then((res) => {
        this.baseInfo = res.data;
      });
    },

    checkFile(files, index) {
      let urls = files.map((item) => {
        return item.filePath;
      });
      let fileType = files[index].fileType;
      this.$refs.lFile.showFile(urls, index, fileType);
    },

    handleBarTitle(type) {
      if (type == "contacts") {
        return "联系人信息";
      }
      if (type == "customer") {
        return "客户信息";
      }

      if (type == "business") {
        return "商机信息";
      }
    },

    //拨打电话
    openCall(value) {
      uni.makePhoneCall({
        // 手机号
        phoneNumber: value,
        // 成功回调
        success: (res) => {
          console.log("拨打成功!");
        },
        // 失败回调
        fail: (res) => {
          console.log("拨打失败!");
        },
      });
    },

    // tab栏切换
    change(index) {
      this.scrollTop = 0;
      if (this.swiperCurrent == index) {
        this.changeData(index);
      } else {
        this.swiperCurrent = index;
      }
    },

    relativeChange({ detail: { current } }) {
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
      this.changeData(current);
    },

    changeData(index) {
      this.scrollTop = 0;
      this.listData = [];
      this.changeRelativeType(index);
      if (this.relativeType == "baseInfo") {
        this.getFiledGetInformation();
      }
      if (
        this.relativeType == "contacts" ||
        this.relativeType == "followRecord"
      ) {
        this.getPageList();
      }
    },

    //返回关联数据的类型名称
    changeRelativeType(index) {
      this.relativeType = this.infoModals[index].type;
    },

    getPageList(type) {
      let self = this;
      let relativeDataList = self.getRelativeRequest();
      if (type == "more") {
        self.currentPage++;
      } else {
        self.currentPage = 1;
      }
      let params = {
        page: self.currentPage,
        limit: self.pageSize,
      };

      if (this.crmType == "customer") {
        params[this.crmType + "Id"] = this.params.crmId;
      } else {
        return;
      }

      relativeDataList(params)
        .then((res) => {
          if (this.relativeType == "followRecord") {
            if (type == "more") {
              self.listData = self.listData.concat(res.data);
            } else {
              self.listData = res.data;
            }
          }
          if (this.relativeType == "contacts") {
            if (type == "more") {
              self.listData = self.listData.concat(res.data.list);
            } else {
              self.listData = res.data.list;
            }
          }

          self.downStatus = "nomore";
        })
        .catch((err) => {
          self.downStatus = "nomore";
        });
    },

    getCrmBaseInfo() {
      let getRequest = {};

      if (this.crmType == "customer") {
        getRequest = crmCustomerRead;
      } else if (this.crmType == "contacts") {
        getRequest = crmContactsRead;
      } else if (this.crmType == "business") {
        getRequest = crmBusinessRead;
      } else {
        return;
      }
      let params = {};
      params[this.crmType + "Id"] = this.params.crmId;

      getRequest(params).then((res) => {
        this.crmData = res.data;
        this.getExamineFlowStepList();
      });
    },

    //获取业务审批步骤信息
    getExamineFlowStepList() {
      let getRequest = {};
      if (this.crmType == "customer") {
        getRequest = crmExamineFlowStepList;
      } else if (this.crmType == "business") {
        getRequest = crmExamineFlowStepList;
      } else {
        return;
      }
      if (!this.crmData.examineRecordId || !this.crmData.ownerUserId) {
        return;
      }
      let params = {
        recordId: this.crmData.examineRecordId,
        ownerUserId: this.crmData.ownerUserId,
      };
      getRequest(params).then((res) => {
        this.examineInfo = res.data;
        // this.isRecheck = res.data.isRecheck ? res.data.isRecheck : 0;
      });
    },

    getRelativeRequest() {
      if (this.relativeType == "followRecord") {
        return crmCustomerRecordIndex;
      }
      if (this.relativeType == "contacts") {
        return crmCustomerQueryContacts;
      }
    },

    //上拉刷新
    reachBottom() {
      // 此tab为空数据
      this.downStatus = "loading";
      if (this.listData.length < this.totalNum) {
        this.getPageList("more");
      } else {
        this.downStatus = "nomore";
      }
    },

    changeScroll(e) {
      this.scrollTop = e.detail.scrollTop;
    },

    reCheckData() {
      this.recheckModel = true;
      console.log(123);
    },

    closeModel() {
      this.recheckModel = false;
      this.recheckReason = "";
    },

    confirmModel() {
      // status == 4 表示撤回
      let params = {
        id: this.params.crmId,
        recordId: this.params.recordId,
        status: 4,
        remarks: this.recheckReason,
      };
      crmExamineFlowAuditExamine(params).then((res) => {
        uni.navigateBack();
        uni.setStorageSync("refreshData", true);
      });
    },
  },
};
</script>

<style>
.wrap {
  width: 100%;
  height: 100%;
}

.title {
  padding: 15px 15px 10px;
}

.info {
  width: 100%;
  box-sizing: border-box;
}

.info .item-title {
  font-weight: bold;
}

.info .item-content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: calc(100%-30px);
  box-sizing: border-box;
  padding: 10rpx 0 10rpx 56rpx;
}

.info .item-file {
  background-color: #eee;
  color: #007aff;
  margin-bottom: 5rpx;
}

.info .item-file:active {
  background-color: #007aff;
  color: #ffffff;
}

.item-mobile {
  color: #007aff;
}

.swiper-box {
  flex: 1;
  height: calc(100%-80rpx);
}

.page-box {
  min-height: calc(100%-50rpx);
}
</style>
